<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
  <table class="layui-hide" id="empInfo" lay-filter="empInfo"></table>
</div>

<script id="toolbar"  type="text/html">
<!--
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
-->
    <button class="layui-btn layui-btn-sm" lay-event="add">添加员工</button>
     <div class="layui-inline">
     <div class="layui-input-inline" style="width:150px;height:38px;">
       <input type="text" name="likeName" id="likeName" required lay-verify="required" placeholder="请输入工号" class="layui-input">
     </div>
     <div class="layui-inline">
       <button class="layui-btn layui-btn-sm"  data-type="reload" id="search"><i class="layui-icon">&#xe615;</i>搜索</button>
     </div>  
    </div>
</script>

<script id="bar" type="text/html">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="editLayer">
    <!-- 编辑模态框 -->
    <div>
     <form action="/edit" class="layui-form" id="editForm">
     <div class="layui-form-item" style="display:none;">
       <label class="layui-form-label">id</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="id" id="id">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">工号</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="empNo" id="empNo">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">姓名</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="name" id="name">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">出生日期</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="birthday" id="birthday">
       </div>   
     </div>
    <div class="layui-form-item">
       <label class="layui-form-label">部门名称</label>
       <div class="layui-input-inline">
    
          <select id="depNo" name="depNo">
             <option value=""></option>
             <option value="1">总裁办公室</option>
             <option value="2">人力资源部</option>
             <option value="3">销售部</option>
             <option value="4">技术部</option>
             <option value="5">财务部</option>
          </select>
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">职位</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="position" id="position">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">性别</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="sex" id="sex">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">电话</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="phone" id="phone">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">基本月薪</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="slary" id="slary">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">学历</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="academic" id="academic">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">身份证号</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="idCard" id="idCard">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">在职状态</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="jobStatus" id="jobStatus">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">婚姻状态</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="marital" id="marital">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">政治面貌</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="political" id="political">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">毕业学校</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="school" id="school">
       </div>   
     </div>     <div class="layui-form-item">
       <label class="layui-form-label">民族</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="nation" id="nation">
       </div>   
     </div>     <div class="layui-form-item">
       <label class="layui-form-label">专业</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="major" id="major">
       </div>   
     </div>
     </form> 
    </div>
</script>

<script type="text/html" id="addLayer">
    <!-- 添加模态框 -->
<div>
     <form action="/edit" class="layui-form" id="editForm">
      
     <div class="layui-form-item">
       <label class="layui-form-label">工号</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="empNo" id="empNo">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">姓名</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="name" id="name">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">出生日期</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="birthday" id="birthday">
       </div>   
     </div>
    <div class="layui-form-item">
       <label class="layui-form-label">部门名称</label>
       <div class="layui-input-inline">
         
          <select id="depNo" name="depNo">
             <option value=""></option>
             <option value="1">总裁办公室</option>
             <option value="2">人力资源部</option>
             <option value="3">销售部</option>
             <option value="4">技术部</option>
             <option value="5">财务部</option>
          </select>
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">职位</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="position" id="position">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">性别</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="sex" id="sex">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">电话</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="phone" id="phone">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">基本月薪</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="slary" id="slary">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">学历</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="academic" id="academic">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">身份证号</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="idCard" id="idCard">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">在职状态</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="jobStatus" id="jobStatus">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">婚姻状态</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="marital" id="marital">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">政治面貌</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="political" id="political">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">毕业学校</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="school" id="school">
       </div>   
     </div>     <div class="layui-form-item">
       <label class="layui-form-label">民族</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="nation" id="nation">
       </div>   
     </div>     <div class="layui-form-item">
       <label class="layui-form-label">专业</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="major" id="major">
       </div>   
     </div>
     </form> 
    </div>
</script>

<script src="layui/layui.js"></script> 
<script th:inline="none">
  layui.use('table',function(){
	  var table=layui.table;
	  var $=layui.jquery;
	  table.render({
		  elem:'#empInfo',
		  url:'/getEmpInfo',
		  method:'post',
		  toolbar:'#toolbar',
		  defaultToolbar:['filter','exports','print',{title:'提示',layEvent:'LAYTABLE_TIPS',icon:'layui-icon-tips'}],
		  title:'员工信息表',
		  cols:[[
		    	 {type:'checkbox',fixed:'left'},
		    	 {field:'id',title:'ID',width:70,fixed:'left',unresize:true,sort:true}
		    	 ,{field:'empNo',title:'工号',sort:true,width:100}
		    	// {field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
		    	//        return '<em>'+ res.email +'</em>'
		    	 //     }},
		    	 ,{field:'name', title:'姓名',sort: true,width:120}
		    	 ,{field:'birthday', title:'出生日期',width:120}
		    	 ,{field:'depName', title:'部门名',width:120}
		    	 ,{field:'position', title:'职位',sort: true,width:130}
		    	 ,{field:'sex', title:'性别',width:80}
		    	 ,{field:'phone', title:'电话号码',width:120,sort: true}
		    	 ,{field:'slary', title:'基本月薪',width:100}
		    	 ,{field:'academic', title:'学历',width:80}
		    	 ,{field:'idCard', title:'身份证号',width:180}
		    	 ,{field:'jobStatus', title:'在职状态',width:80}
		    	 ,{field:'marital', title:'婚姻状态',width:80}
		    	 ,{field:'political', title:'政治面貌',width:100}
		    	 ,{field:'school', title:'毕业学校',width:200}
		    	 ,{field:'nation', title:'民族',width:80}
		    	 ,{field:'major', title:'专业',width:200}
		    	 ,{fixed: 'right', title:'操作', toolbar: '#bar', width:120}
		     ]],
		     id:'testreload',
		     page:true
	  });
	  
	  //表格数据重载
	  var active={
			  reload:function(){
				  var demoReload=$('#likeName');
				  table.reload('testreload',{
					  page:{
						  curr:1
					  },
					  where:{
						  //参数name的名称要与控制器中的一致
						  empNo:demoReload.val()
					  },
					  url:'/searchEmp',
					  method:'post'
				  });
			  }
	  };
	  
	  //搜索按钮事件
	  
	  $("#search").on('click',function(){
		  var type=$(this).data('type');
		  active[type]?active[type].call(this):'';
	  });
	  
	  
	  //头部工具栏
	  table.on('toolbar(empInfo)',function(obj){
		  var checkStatus=table.checkStatus(obj.config.id);
		  switch(obj.event){
		  case 'add':
			 // var data=checkStatus.data;
			//  layer.alert(JSON.stringify(data));
			  layui.use('form',function(){
				  var form =layui.form;
				  var $=layui.jquery;
				//  var id1=$("#id").val();
				//  var account=$("#account").val();
				
				  var index=layer.open({
					  formType:1,
					  title:'添加员工',
					  area:['450px','450px'],
					  content:$('#addLayer').html(),
					  btn:['确认','取消'],
					  yes:function(index,layero){
						  
						    // var id=$("#id").val();
						     var empNo=$("#empNo").val();
						     var name=$("#name").val();
						     var depNo=$("#depNo").val();
						     var birthday=$("#birthday").val();
						     var position=$("#position").val();
						     var sex=$("#sex").val();
						     var phone=$("#phone").val();
						     var slary=$("#slary").val();
						     var academic=$("#academic").val();
						     var idCard=$("#idCard").val();
						     var jobStatus=$("#jobStatus").val();
						     var marital=$("#marital").val();
						     var political=$("#political").val();
						     var school=$("#school").val();
						     var nation=$("#nation").val();
						     var major=$("#major").val();
						  $.ajax({
							  url:'/addEmp',
							  method:'post',
							  contentType:"application/json;charset=utf-8",
							  data:JSON.stringify({empNo:empNo,name:name,depNo:depNo,birthday:birthday,position:position,sex:sex,phone:phone,slary:slary,academic:academic,idCard:idCard
								  ,jobStatus:jobStatus,marital:marital,political:political,school:school,nation:nation,major:major}),
							  success:function(data){
								  layer.msg("添加成功");
								  window.setTimeout(function(){window.location.reload();},500)
							  },
							  error:function(data){
								  layer.msg("添加失败");
								  layer.msg(account1);
							  }
						  });
					  },
					  btn2:function(index){layer.close(index);},
					  success:function(index,layero){
						  layui.use('laydate',function(){
							   var laydate=layui.laydate;
							   laydate.render({
								   elem:'#birthday',
								   type:'date',
							   });
						   });
						  form.render();
					  },
				  });
			  });
		  break;
		  case 'getCheckLength':
			  var data=checkStatus.data;
			  layer.msg('选中了：'+data.length+'个');
		  break;
		  case 'isAll':
			  layer.msg(checkStatus.isAll?'全选':'未全选');
		  break;
		  case 'LAYTABLE_TIPS':
			  layer.alert('这是工具栏右侧自定义的一个图标按钮');
		  break;
		  };
	  });
	  
	  //行工具栏
	  table.on('tool(empInfo)',function(obj){
		  var data=obj.data;
		  if(obj.event==='del'){
			  layer.confirm('真的删除吗',function(index){
				// obj.del();
				 layer.close(index);
					 
				  //向服务器端发送删除指令
				  $.ajax({
					  url:'/delEmp?id='+data.id,
					  method:'post',
					  async:false,
					  
					  success:function(data){
						  if(data){
						  layer.msg("删除成功");
						  obj.del();
						  } 
						//  }else{layer.msg("删除失败");}
					  },
					  error:function(data){
						  if(data){
							  layer.msg("删除失败");
						  }
					  }
				  });
			  });
		  }else if(obj.event==='edit'){
			 layui.use('form',function(){
				 var form=layui.form;
				 var $=layui.jquery;
			 var editIndex=layer.open({
				  formType:1,
				  title:'修改信息',
				  btn:['确认','取消'],
				  yes:function(editIndex,layero){
					  
					//获取表单的值，必须再次出获取，若在给弹窗赋值后再获取，则获取到的仍是原始数据，相当于加载了一个空的表单，然后弹窗赋值，然后获取表单的值
					 var id=$("#id").val();
				     var empNo=$("#empNo").val();
				     var name=$("#name").val();
				     var depNo=$("#depNo").val();
				     var birthday=$("#birthday").val();
				     var position=$("#position").val();
				     var sex=$("#sex").val();
				     var phone=$("#phone").val();
				     var slary=$("#slary").val();
				     var academic=$("#academic").val();
				     var idCard=$("#idCard").val();
				     var jobStatus=$("#jobStatus").val();
				     var marital=$("#marital").val();
				     var political=$("#political").val();
				     var school=$("#school").val();
				     var nation=$("#nation").val();
				     var major=$("#major").val();
					 // layer.msg(account);

					  //向后台发送修改请求
					  $.ajax({
						  url:'/editEmp',
						  contentType:"application/json;charset=utf-8",
						  method:'post',
						  data:JSON.stringify({id:id,empNo:empNo,name:name,depNo:depNo,birthday:birthday,position:position,sex:sex,phone:phone,slary:slary,academic:academic,idCard:idCard
							  ,jobStatus:jobStatus,marital:marital,political:political,school:school,nation:nation,major:major}),
						  success:function(data){
							  layer.msg("修改成功");
							  //obj.update({
								 // empNo:empNo,
								 // name:name,
							     // depName:depNo=1?'总裁办公室':depNo=2?'人力资源部':depNo=3?'销售部':depNo=4?'技术部':depNo=5?'财务部':depNo,
								 // birthday:birthday,
								 // position:position,
								 // sex:sex,
								 // phone:phone,
								 // slary:slary
							 // });
							 window.setTimeout(function(){window.location.reload();},500)
							 
						  },
						  error:function(data){layer.msg("修改失败");}
					  });
				  },
				  btn2:function(editIndex,layero){
					  layer.close(editIndex);
				  },
				//  end:function(){parent.reload();},
				  area:['450px','450px'],
				  content:$('#editLayer').html(),
				  success:function(layero,index){ 
					  //给个控件赋值
						 $("[name='id']").val(data.id);
						 $("[name='empNo']").val(data.empNo);
						 $("[name='name']").val(data.name);
						 $("[name='birthday']").val(data.birthday);
						// $("[name='depNo']").val(data.depName);
				         switch(data.depName){
				         case '总裁办公室':
				        	 $("[name='depNo']").val(1);
				        	 break;
				         case '人力资源部':
				        	 $("[name='depNo']").val(2);
				        	 break;
				         case '销售部':
				             $("[name='depNo']").val(3);
				             break;
				         case '技术部':
				        	 $("[name='depNo']").val(4);
				        	 break;
				         case '财务部':
				        	 $("[name='depNo']").val(5);
				        	 break;
				         }
						 $("[name='position']").val(data.position);
						 $("[name='sex']").val(data.sex);
						 $("[name='phone']").val(data.phone);
						 $("[name='slary']").val(data.slary);
						 $("[name='academic']").val(data.academic);
						 $("[name='idCard']").val(data.idCard);
						 $("[name='jobStatus']").val(data.jobStatus);
						 $("[name='marital']").val(data.marital);
						 $("[name='political']").val(data.political);
						 $("[name='school']").val(data.school);
						 $("[name='nation']").val(data.nation);
						 $("[name='major']").val(data.major);
						
						 layui.use('laydate',function(){
							   var laydate=layui.laydate;
							   laydate.render({
								   elem:'#birthday',
								   type:'date',
							   });
						   });
						 form.render()},
				  });						 
			 });
		  }
	  });

  });
</script>
</body>
</html>